<!--勘探点信息新增/编辑-->
<template>
  <div class="app-container-detail">
    <el-dialog
      v-dialogDrag
      :title="dialogTitle"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      class="dialogStyleMiddle"
      :before-close="cancel"
    >
      <el-form
        v-if="dialogVisible"
        ref="addForm"
        class="dialog-form"
        :model="formData"
        :rules="rules"
        label-width="auto"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="钻孔类型" prop="drillHole">
              <el-radio-group v-model="formData.drillHole" clearable style="margin-top: 13px" @change="isShow = $event === '0'">
                <el-radio label="0">钻探</el-radio>
                <el-radio label="1">静探</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="编号" prop="explorationCode">
              <label slot="label" v-html="`编&emsp;&emsp;号`" />
              <el-input v-model="formData.explorationCode" clearable placeholder="请输入勘探点编号" size="medium" />
            </el-form-item>
          </el-col>
          <el-col v-if="isShow" :span="12">
            <el-form-item label="钻探类型" prop="drillingType">
              <el-select
                v-model="formData.drillingType"
                size="medium"
                filterable
                placeholder="请选择钻探类型"
                prop="status"
                clearable
                @change="drillingTypeChange"
              >
                <el-option
                  v-for="dict in drillingTypeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-if="formData.drillingType ==='0' && isShow" :span="12">
            <el-form-item label="" prop="explorationType">
              <label slot="label" v-html="`钻孔子类`" />
              <el-select
                v-model="formData.explorationType"
                style="width:100%"
                size="medium"
                placeholder="请选择钻孔"
                clearable
              >
                <el-option
                  v-for="dict in sysExplorationTypeList"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-if="formData.drillingType === '1' && isShow" :span="12">
            <el-form-item label="" prop="explorationType">
              <label slot="label" v-html="`混&emsp;&emsp;合`" />
              <el-select
                v-model="formData.explorationType"
                size="medium"
                placeholder="请选择混合"
                clearable
              >
                <el-option
                  v-for="dict in sysMixedTypeList"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-if="formData.drillingType === '2' && isShow" :span="12">
            <el-form-item label="井探" prop="explorationType">
              <el-select
                v-model="formData.explorationType"
                size="medium"
                placeholder="请选择井探"
                clearable
              >
                <el-option
                  v-for="dict in sysWellTypeList"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-if="formData.drillingType === '3' && isShow" :span="12">
            <el-form-item label="槽探(坑)" prop="explorationType">
              <el-select
                v-model="formData.explorationType"
                size="medium"
                placeholder="请选择探井"
                clearable
              >
                <el-option
                  v-for="dict in sysPitTypeList"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="坐标X" prop="x1">
              <label slot="label" v-html="`坐 标&emsp;X`" />
              <el-input v-model="formData.x1" clearable placeholder="" size="medium" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="坐标Y" prop="y1">
              <label slot="label" v-html="`坐 标&emsp;Y`" />
              <el-input v-model="formData.y1" clearable placeholder="" size="medium" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设计深度" prop="depth">
              <el-input v-model="formData.depth" clearable placeholder="" size="medium">
                <template slot="append"><el-button />m</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划时间" prop="dateTimeRange">
              <el-date-picker
                v-model="formData.dateTimeRange"
                type="datetimerange"
                range-separator="至"
                value-format="yyyy-MM-dd HH:mm:ss"
                start-placeholder="计划开孔时间"
                end-placeholder="计划终孔时间"
                size="small"
                clearable
                @change="handleChangeTime"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="高程" prop="elevation">
              <label slot="label" v-html="`高&emsp;&emsp;程`" />
              <el-input v-model="formData.elevation" clearable placeholder="请输入高程" size="medium">
                <template slot="append"><el-button />m</template>
              </el-input>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="12">-->
          <!--            <el-form-item label="坐标经度" prop="y">-->
          <!--              <el-input v-model="formData.x" clearable placeholder="" size="medium" />-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="12">-->
          <!--            <el-form-item label="坐标纬度" prop="x">-->
          <!--              <el-input v-model="formData.y" clearable placeholder="" size="medium" />-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="24">-->
          <!--            <el-input v-model="currentProvince" class="search" placeholder="请输入地址查找相关位置" />-->
          <!--            <BMapGetLocation :address="currentProvince" :current-province="currentProvince" @BMapGetLocation="BMapGetLocation" />-->
          <!--          </el-col>-->
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="cancel">取 消</el-button>
        <el-button size="medium" type="primary" :disabled="btnDisabled" @click="submitForm">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 字段校验
import { validateNumLetter, validateZ, validateDouble } from '@/utils/validate'
// 页面接口
import { addWorkload, updateWorkload, getWorkloadById } from '@/api/projectManage/ProjectChange/workloadChange'
import { getSysDicts } from '@/api/common/getSysDicts'
import { mapState } from 'vuex'
export default {
  name: 'Add',
  components: {},
  props: {
    proId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isShow: true,
      // 钻探类型
      drillingTypeOptions: [],
      sysExplorationTypeList: [], // 钻孔子类
      sysMixedTypeList: [], // 混合子类
      sysWellTypeList: [], // 井探子类
      sysPitTypeList: [], // 槽探(坑)子类
      /* 新增 start*/
      dialogTitle: '', // 弹层标题
      dialogVisible: false, // 弹层是否显示
      btnDisabled: false, // 确定按钮
      exlorationTime: '', // 开孔终孔时间
      // 选择的城市
      currentProvince: '',
      cityOptions: [], // 城市数据
      cityNormalizer: {
        value: 'value',
        label: 'label',
        children: 'children'
      },
      formData: { // 新增数据
        proId: '',
        explorationCode: '', // 勘探点编号
        drillHole: '0', // 钻孔类型
        drillingType: '', // 钻探类型
        explorationType: '', // 钻孔子类
        depth: '', // 设计深度
        dateTimeRange: [], // 计划时间
        startTime: '',
        endTime: '',
        elevation: '', // 高程
        x: '', // 坐标经度
        y: '', // 坐标纬度
        x1: '', // 2000X
        y1: '', // 2000X
        currentProvince: '' // 所在区域
      },
      rules: { // 表单校验
        explorationCode: [
          { required: true, message: '勘探点编号不能为空', trigger: 'blur' },
          { required: true, max: 20, message: '勘探点编号长度不得超过 20 个字符' },
          { required: true, validator: validateNumLetter }
        ],
        drillHole: [
          { required: true, message: '钻孔类型不能为空', trigger: 'blur' }
        ],
        drillingType: [
          { required: true, message: '钻探类型不能为空', trigger: 'blur' }
        ],
        explorationType: [
          { required: true, message: '钻孔子类不能为空', trigger: 'blur' }
        ],
        elevation: [
          { required: true, message: '高程不能为空', trigger: 'blur' },
          { required: true, validator: validateZ, trigger: 'blur' }
        ],
        x1: [
          { required: true, message: '坐标X不能为空', trigger: 'blur' },
          { validator: validateDouble, trigger: 'blur' }
        ],
        y1: [
          { required: true, message: '坐标Y不能为空', trigger: 'blur' },
          { validator: validateDouble, trigger: 'blur' }
        ],
        dateTimeRange: [
          { required: true, type: 'array', message: '开孔或终孔时间不能为空', trigger: 'change' }
        ],
        depth: [
          { required: true, validator: validateDouble, trigger: 'blur' }
        ]
      }
      /* 新增 end*/
    }
  },

  computed: {
    ...mapState({
      explorationType: state => state.basicInfo.explorationType // 勘探点类型
    })
  },

  methods: {
    // 钻探类型
    async getSysDrillingTypeList() {
      const { data: { rows }} = await getSysDicts('sys_drilling_type')
      if (rows) this.drillingTypeOptions = rows
    },
    // 钻孔子类
    async getSysExplorationTypeList() {
      const { data: { rows }} = await getSysDicts('sys_exploration_type')
      if (rows) this.sysExplorationTypeList = rows
    },
    // 混合子类
    async getSysMixedTypeList() {
      const { data: { rows }} = await getSysDicts('sys_mixed_type')
      if (rows) this.sysMixedTypeList = rows
    },
    // 井探子类
    async getSysWellTypeList() {
      const { data: { rows }} = await getSysDicts('sys_well_type')
      if (rows) this.sysWellTypeList = rows
    },
    // 槽探(坑)子类
    async getSysPitTypeList() {
      const { data: { rows }} = await getSysDicts('sys_pit_type')
      if (rows) this.sysPitTypeList = rows
    },
    // 获取时间
    handleChangeTime(time) {
      if (!time) {
        this.formData.startTime = ''
        this.formData.endTime = ''
        return
      }
      const [startTime, endTime] = time
      this.formData.startTime = startTime
      this.formData.endTime = endTime
    },
    // 钻探类型变化
    drillingTypeChange(e) {
      this.formData.explorationType = ''
      switch (e) {
        case '0' :
          this.getSysExplorationTypeList()
          break
        case '1':
          this.getSysMixedTypeList()
          break
        case '2':
          this.getSysWellTypeList()
          break
        case '3':
          this.getSysPitTypeList()
          break
      }
    },
    /* 新增弹层 start*/
    // 从父组件获取参数的方法
    handleAdd(title, id) {
      this.emptyAddForm()
      this.dialogTitle = title
      this.dialogVisible = true
      this.getSysDrillingTypeList()
      if (id) {
        this.getDetailById(id)
      }
    },
    // 提交按钮
    submitForm() {
      this.$refs['addForm'].validate(valid => {
        if (valid) {
          this.btnDisabled = true
          this.formData.proId = this.proId
          if (this.formData.explorationType === '1') {
            this.formData.drillingType = ''
            this.formData.drillHole = ''
            this.formData.blend = ''
            this.formData.exploratoryWell = ''
          }
          if (this.formData.id) { // 更新
            updateWorkload(this.formData).then(res => {
              if (res) {
                this.dialogVisible = false
                this.msgSuccess('修改成功')
                this.$parent.getList()
                this.cancel()
              } else {
                this.msgError(res.message)
                this.btnDisabled = false
              }
            })
          } else {
            addWorkload(this.formData).then(res => {
              if (res) {
                this.msgSuccess('保存成功')
                this.$parent.getList()
                this.cancel()
              } else {
                this.msgError(res.message)
                this.btnDisabled = false
              }
            })
          }
        }
      })
    },
    // 获取详情
    getDetailById(id) {
      getWorkloadById(id).then(res => {
        if (res) {
          this.drillingTypeChange(res.data.drillingType)
          const { drillHole, startTime, endTime } = res.data
          this.formData = { ...res.data }
          if (startTime && endTime) this.formData.dateTimeRange = [startTime, endTime]
          this.isShow = drillHole !== '1'
        }
      })
    },
    // 表单重置
    emptyAddForm() {
      this.resetForm('addForm')
      this.formData.currentProvince = []
      this.formData.id = ''
    },
    // 取消按钮
    cancel() {
      this.dialogVisible = false
      this.btnDisabled = false
      this.isShow = true
      this.emptyAddForm()
    }
    /* 新增弹层 end*/
  }
}
</script>

<style scoped>
  .search {
    width: 200px;
    position: relative;
    top: 50px;
    left: 30px;
    z-index: 9999;
  }
</style>
